<template>
  <div>
    <el-card class="box-card">
      <div id="yzMap"></div>
    </el-card>
  </div>


</template>
<script>
import MapInit from '@/components/map/mapInit'
import { getMcuTenantResourceList } from "@/api/hardware/mcuTenantResource";
import { getTenantId } from '@/utils/auth'

export default {
  name: 'Index',
  components: {},
  data () {
    return {
      mcuTenantResourceListData: [],
      tenantId: getTenantId(),
      map: null,
      marker: null,
      markerclick: null
    }
  },
  created () {
    /*    if (location.href.indexOf("#reloaded") == -1) {
          location.href = location.href + "#reloaded";
          location.reload();
        } else*/
    setTimeout(() => {
      this.queryMcuTenantResourceListData();
    }, 500)

  },
  beforeDestroy () {
  },
  mounted () {
    window.viewMore = this.viewMore;
  },
  methods: {
    /**  查询租户添加的MCU 列表  */
    queryMcuTenantResourceListData () {
      getMcuTenantResourceList({ tenantId: this.tenantId, reverse: true }).then(response => {
        this.mcuTenantResourceListData = response.data;
        MapInit.init().then(
          T => {
            this.T = T;
            const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk=f5b87cbe5299f1e041adb4b9f5b83fcb";
            const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
            const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
            this.map = new T.Map('yzMap', config);
            const ctrl = new T.Control.MapType();
            this.map.addControl(ctrl);

            let icon = new T.Icon({
              iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
              iconSize: new T.Point(33, 33),
              iconAnchor: new T.Point(10, 25)
            });

            let that = this
            that.markers = []
            //创建标注
            this.mcuTenantResourceListData.forEach(it => {
              let lngLat = new T.LngLat(it.longitude, it.latitude)
              var marker = new T.Marker(
                lngLat/*,
                {
                  icon: icon
                }*/
              )


              //添加标注的标签（标题）
              let label = new T.Label({
                text: it.model + '（' + it.name + '）（' + it.remark + '）',
                position: lngLat,
                offset: new T.Point(-150, 10)
              });
              this.map.addOverLay(label);     // 将标签（标题）添加到地图中
              this.map.addOverLay(marker)     // 将标注添加到地图中
              let html = [];
              html.push("<div style='margin:0px;'>");
              html.push("<div style='margin:10px 10px; '>");
              html.push("<img class='el-image__inner' style='float:left;margin:0px 10px;' src='");
              html.push(it.scenePhotos)
              html.push("'/><div style='margin:10px 0px 10px 120px;width: 400px;'>");
              html.push("MCU型号 ：<span style='color: #e50839;'>")
              html.push(it.model);
              html.push("</span><br><br>名称 ：<span style='color: #e50839;'>")
              html.push(it.name);
              html.push("</span><br><br>通道数 ：<span style='color: #e50839;'>")
              html.push(it.channelsNumber);
              html.push("</span><br><br>通讯号 ：<span style='color: #e50839;'>")
              html.push(it.correlationIp);
              html.push("</span><br><br>经度 ：<span style='color: #e50839;'>")
              html.push(it.longitude);
              html.push("</span><br><br>纬度 ：<span style='color: #e50839;'>")
              html.push(it.latitude);
              html.push("</span><br><br><br></div>")
              html.push("<input style='background: #ffffff;color: #1890ff;border: none;position: relative;right: -470px;' type='button' value='查看更多'  onClick='viewMore(");
              html.push(it.id);
              html.push(")'></div></div>");
              let content = html.join('')
              addClickHandler(content, marker)
              marker.content = content
              that.markers.push(marker)

            })

            //添加标记点
            function addClickHandler (content, marker) {
              marker.addEventListener('click', function (e) {
                openInfo(content, e)
              })
            }
            function openInfo (content, e) {
              let point = e.lnglat;
              let markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) })

              that.map.openInfoWindow(markerInfoWin, point) // 开启信息窗口
            }


            //中心点
            if (this.mcuTenantResourceListData.length > 0) {
              this.map.centerAndZoom(new T.LngLat(this.mcuTenantResourceListData[0].longitude, this.mcuTenantResourceListData[0].latitude), 12);
            } else {
              this.map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);
            }

          }).catch()


      });
    }, viewMore (id) { //查看更多
      this.$router.push({ name: "MonitoringData", params: { mcuTenantResourceId: id } });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .tdt-infowindow-content-wrapper {
  width: 600px;
  background: #fff;
  color: #333;
  box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
}

#yzMap {
  width: 99%;
  height: 110%;
  position: absolute;
}
</style>
